<template>
  <div>
    <!-- tab 组件 -->
    <div class="tab-control" v-if="typeList.length !== 0">
      <ly-tab v-model="selectedId" :items="typeList" :options="options" @change="updateRecord">
        <!-- <ly-tab-item v-for="(item, index) in typeList" :key="index">
        {{item.name}}
        </ly-tab-item>-->
      </ly-tab>
    </div>
    <!-- content -->
    <div class="record-content container">
      <mt-loadmore
        :bottomDistance="5"
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="isAutoFill"
      >
        <record-content
          :data-list="dataList"
          @recordDetail="handleGoToDetail"
          v-if="dataList.length!==0"
        ></record-content>
      </mt-loadmore>
    </div>
    <!-- 无数据时显示 -->
    <div class="empty-content" v-if="showDataList">
      <img src="@/assets/images/common/empty-info.png" alt />
      <p>暂无交易记录</p>
    </div>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
import RecordContent from "@/components/content/records/RecordContent";
import MainTabBar from "@/components/common/tabbar/MainTabBar";
import { getRecords, getRecordsType } from "network/api/records";
export default {
  created() {
    // 获取交易类型
    this._getRecordsType();
    // 获取交易记录
    this.loadTop(1);
  },
  components: {
    RecordContent,
    MainTabBar
  },
  data() {
    return {
      dataList: [],
      typeList: [],
      showDataList: false,
      pageNum: 1,
      allLoaded: false, //可以进行上拉
      isAutoFill: false, //是否自动触发上拉函数
      // 配置tab组件选项
      selectedId: 0,
      options: {
        activeColor: "#1d98bd",
        labelKey: "name",
      },
    };
  },
  methods: {
    // 获取交易记录列表
    _getRecordsType() {
      getRecordsType().then((res) => {
        this.typeList = res.data.concat(res.data);
      });
    },
    //跳转详情页面
    handleGoToDetail(id) {
      this.$router.push({
        path: "/recordDetail",
        query: {
          id: id,
        },
      });
    },
    // 下拉刷新
    loadTop(id) {
      this.pageNum = 1;
      getRecords({
        id: id,
        pageNum: this.pageNum,
      }).then((res) => {
        this.allLoaded = false; // 可以进行上拉
        if (res.code === "0") {
          console.log(res);
          this.dataList = this.dataList = [
            {
              id: 1,
              transactionName: "发布订单",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 2,
              transactionName: "活生生",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 2, //
            },
            {
              id: 34,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 25,
              transactionName: "活生生",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 2, //
            },
            {
              id: 33,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 334,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 2435,
              transactionName: "活生生",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 2, //
            },
            {
              id: 4333,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
          ];
          this.$refs.loadmore.onTopLoaded();
          if (res.data.list.length === 0) {
            // this.showDataList = true
          }
          // this.dataList = res.data.list
        } else {
          this.$toast({
            message: res.msg,
            position: "middle",
            duration: 3000,
          });
        }
      });
    },
    // 上拉加载
    loadBottom(id) {
      this.pageNum++;
      getRecords({
        id: id,
        pageNum: this.pageNum,
      }).then((res) => {
        this.$refs.loadmore.onBottomLoaded();
        if (res.code === "0") {
          console.log(res);
          if (res.data.list.length === 0) {
            // this.showDataList = true
          }
          // this.dataList = res.data.list
          this.dataList = this.dataList.concat([
            {
              id: 1,
              transactionName: "发布订单",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 2,
              transactionName: "活生生",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 2, //
            },
            {
              id: 34,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 25,
              transactionName: "活生生",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 2, //
            },
            {
              id: 33,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 334,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
            {
              id: 2435,
              transactionName: "活生生",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 2, //
            },
            {
              id: 4333,
              transactionName: "哈哈哈",
              content: "987654334567890",
              createdTime: "2009 09-08",
              money: "723723.00",
              type: 1, //
            },
          ]);
        } else {
          this.$toast({
            message: res.msg,
            position: "middle",
            duration: 3000,
          });
        }
      });
    },
    // tab 切换
    updateRecord(item) {
      console.log(item.id);
      this.loadTop(item.id);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common.scss";
.title {
  .title-info,
  .selected-btn {
    line-height: normal;
  }
  .selected-btn {
    display: inline-block;
    width: 36px;
    height: 16px;
    left: 10px;
    position: relative;
  }
}
.tab-control {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: $white;
  z-index: 9;
}
.record-content {
  height: 100vh;
  overflow: scroll;
  padding-top: 44px;
}
.empty-content {
  width: $no-record-width;
  margin: 100px auto 0;
  img {
    width: 100%;
  }
  p {
    text-align: center;
    font-size: $font-size28;
    color: $text-color6;
    padding-top: 24px;
  }
}
.arrow {
  display: inline-block;
}
</style>
